<template>
  <div>
    <div class="multi-tags">
      <el-tag style="margin-right: 5px;margin-bottom: 5px;"
              v-for="employee in inputEmployees"
              :key="employee.name"
              closable
              @close="employeeRemove(employee)"
      >
        {{employee.name}}
      </el-tag>
      <el-button icon="el-icon-plus" size="mini" @click="openDialog">{{placeholder}}</el-button>
    </div>
    <el-dialog :title="placeholder" :visible.sync="open"  @close="submit">
      <el-row :gutter="20">
        <el-col :span="12" @click="focus">
          <el-tag style="margin-right: 5px;margin-bottom: 5px;"
                  v-for="employee in checkedEmployees"
                  :key="employee.name"
                  closable
                  @close="employeeRemove(employee)"
          >
            {{employee.name}}
          </el-tag>
          <el-input class="input-deep" ref='input' placeholder="搜索"></el-input>
        </el-col>
        <el-col :span="12">
          <div style="height: 300px">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item v-for="dept in breadDeptList" ><a href="/" @click.prevent="breadDeptClick(dept)">{{dept.deptName}}</a></el-breadcrumb-item>
            </el-breadcrumb>
            <div v-for="child in childDeptList"><el-checkbox v-model="checked">{{ child.deptName }}</el-checkbox><el-button type="text"  @click="childDeptClick(child)"><svg-icon icon-class="tree-table"/> 下级</el-button> </div>
            <div style="height: 300px;overflow:auto;">
              <el-checkbox-group v-model="checkedEmployeeIds">
                <div v-for="employee in employeeList">
                  <el-checkbox :label="employee.id" @change="val=>checkinlist(val,employee)" :disabled="employee.status !=1 ">
                    <el-avatar shape="square" :size="20" :src="employee.thumbAvatar"></el-avatar>
                    {{employee.name}}
                  </el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-button size="mini" type="primary" plain @click="submit">确定</el-button>
        <el-button size="mini" plain @click="reset()">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import {listEmployee} from "@/api/wework/employee";
import {listDept,getDept} from "@/api/system/dept"
import icons from "@/components/IconSelect/requireIcons";
export default {
  name:"EmployeeSelect",
  components: {},
  props:{
    defaultEmployees:Array,
    placeholder:String
  },
  data () {
    return {
      rootDept:{},
      currentDept:{},
      //数组深copy
      checkedEmployees:JSON.parse(JSON.stringify(this.defaultEmployees)),
      checkedEmployeeIds:this.defaultEmployees.map(e=>e.id),
      //数组深copy
      inputEmployees:JSON.parse(JSON.stringify(this.defaultEmployees)),
      checked: true,
      breadDeptList:[],
      childDeptList:[],
      employeeList:[],
      // 是否显示弹出层
      open: false,
    };
  },
  created() {
    let parentDeptId = 200;
    this.getRootDept(parentDeptId);
    this.getChildrenDept(parentDeptId);
    this.getEmployees(parentDeptId);
  },
  watch: {
    defaultEmployees (val) {
      this.checkedEmployees=JSON.parse(JSON.stringify(this.defaultEmployees));
      this.checkedEmployeeIds=this.defaultEmployees.map(e=>e.id);
      this.inputEmployees=JSON.parse(JSON.stringify(this.defaultEmployees));
    }
  },
  methods:{
    getChildrenDept(parentDeptId){
      let queryParam = {"parentId":parentDeptId};
      listDept(queryParam).then(response=>{
        this.childDeptList = response.data;
        console.log(this.childDeptList);
      });
    },
    getEmployees(deptId){
      let queryParam = {"mainDeptId":deptId};
      listEmployee(queryParam).then(response=>{
        this.employeeList = response.rows;
      });
    },
    getRootDept(deptId){
      getDept(deptId).then(response=>{
        this.rootDept = response.data;
        this.currentDept = this.rootDept;
        this.breadDeptList = [];
        this.breadDeptList.push(this.rootDept);
        console.log(this.rootDept.deptName)
      });
    },
    breadDeptClick(dept){
      this.currentDept = dept;
      this.getChildrenDept(dept.deptId);
      this.getEmployees(dept.deptId);
      this.breadDeptList = this.breadDeptList.slice(0,this.breadDeptList.indexOf(this.currentDept)+1);
    },
    childDeptClick(dept){
      console.log(dept)
      this.currentDept = dept;
      this.getChildrenDept(dept.deptId);
      this.getEmployees(dept.deptId);
      this.breadDeptList.push(this.currentDept);
    },
    checkinlist(val,employee){
      if (val === true){
        this.checkedEmployees.push(employee)
      }else{
        let index = this.checkedEmployees.findIndex(item => item.id === employee.id);
        this.checkedEmployees.splice(index, 1);
      }
      console.log("The inputEmployees******************************")
      console.log(this.inputEmployees);
      console.log("The defaultEmployees ******************************")
      console.log(this.defaultEmployees);
    },
    employeeRemove(employee){
      let index = this.checkedEmployees.findIndex(item => item.id === employee.id);
      this.checkedEmployees.splice(index, 1);
      this.checkedEmployeeIds.splice(this.checkedEmployeeIds.indexOf(employee.id),1);
    },
    openDialog(){
      this.open = true;
    },
    submit(){
      this.open = false;
      this.inputEmployees = this.checkedEmployees.map(employee=>{return {"id":employee.id,"name":employee.name}});
      this.$emit('selectedEmployees',this.inputEmployees)
      document.body.click()
    },
    reset() {
      this.open = false;
      this.checkedEmployeeIds=[];
      this.checkedEmployees=[];
    },
    focus () {
      this.$refs.input.focus()
    },
  }
}
</script>
<style lang="scss" scoped>
.multi-tags{
  padding: 5px 10px;
  display: block;
  border: 1px solid #ccc;
  input{
    background: transparent;
  }
}
.input-deep{
  width: 80px;
}
/* 利用穿透，设置input边框隐藏 */
::v-deep .el-input__inner {
    -webkit-appearance: none;
    background-image: none;
    border: 0;
}
</style>
